<template>
  <div>
    <TheTable
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
      @selectData="selectData"
    >
      <div
        v-for="(item, index) in columns"
        :key="index"
        class="item"
        effect="dark"
        placement="top-start"
      >
        <el-table-column
          fixed="left"
          type="selection"
          v-if="index === 0"
          effect="dark"
          placement="top-start"
          class="item"
        >
        </el-table-column>
        <el-table-column type="expand" v-if="index === 0">
          <template slot-scope="props">
            <el-form label-position="right" inline class="demo-table-expand">
              <el-form-item class="title">
                <span>原辅料库存明细</span>
              </el-form-item>
              <br />
              <el-form-item label="SKU:">
                <span>{{ props.row.sku }}</span>
              </el-form-item>
              <el-form-item label="产品名称:">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="供应商id:">
                <span>{{ props.row.supplierId }}</span>
              </el-form-item>
              <el-form-item label="所属种类:">
                <span>{{ props.row.variety }}</span>
              </el-form-item>
              <el-form-item label="产品类型:">
                <span>{{ props.row.type }}</span>
              </el-form-item>
              <el-form-item label="规格:">
                <span>{{ props.row.specification }}</span>
              </el-form-item>
              <el-form-item label="单位:">
                <span>{{ props.row.unit }}</span>
              </el-form-item>
              <el-form-item label="单价:">
                <span>{{ props.row.price +"元"}}</span>
              </el-form-item>
              <el-form-item label="最佳食用期/天:">
                <span>{{ props.row.bestBeforeDate +"天" }}</span>
              </el-form-item>
              <el-form-item label="品牌:">
                <span>{{ props.row.brand }}</span>
              </el-form-item>
              <el-form-item label="保质期:">
                <span>{{ props.row.expirationDate + "个月" }}</span>
              </el-form-item>
              <el-form-item label="投入品类型:">
                <span>{{ props.row.inputType }}</span>
              </el-form-item>
              <el-form-item label="产品等级:">
                <span>{{ props.row.level }}</span>
              </el-form-item>
              <el-form-item label="产地:">
                <span>{{ props.row.originPlace }}</span>
              </el-form-item>
              <el-form-item label="电子标签状态:">
                <span>{{ props.row.tagStatus }}</span>
              </el-form-item>
              <el-form-item label="产品图片:">
                <span>{{ props.row.images }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          :label="item.name"
          v-if="item.show"
          :prop="item.prop"
          show-overflow-tooltip
        ></el-table-column>
      </div>

      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <!-- <el-button
            type="success"
            size="mini"
            class="el-icon-full-screen"
            v-auth="'processing_material_access_update'"
            @click="qrCodeOpen"
          ></el-button> -->
          <el-button
            type="primary"
            size="mini"
            class="el-icon-edit"
            v-auth="'processing_material_access_update'"
            @click="editEvent(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            size="mini"
            v-auth="'processing_material_inventory_delete'"
            class="el-icon-delete"
            @click="removeMaterial(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </TheTable>

    <!-- 表单开始 -->
    <FormInfo
      v-show="dialogVisible"
      @close="closeEvent"
      :varietyList="varietyList"
      :productType="productType"
      :dialogVisible="dialogVisible"
      @closeDialog="closeDialog"
      @editMaterInfo="editMaterInfo"
      :dialogTitle="dialogTitle"
      :addInfo="editObject"
      :message="message"
      :unitList="unitList"
      :inputList="inputList"
      :levelList="levelList"
      :tagStatusList="tagStatusList"
    />
    <!-- 表单结束 -->

    <!-- 二维码弹框开始 -->
    <el-dialog
      title="原辅料产品二维码"
      :visible.sync="qrCodeDialogVisible"
      @opened="qrCodeCreate"
      :before-close="qrCodeHandleClose">
      <div style="margin-left: 25%">
        <div id="qrCode" ref="qrCode"></div>
      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
    <!-- 二维码弹框结束 -->
  </div>
</template>

<script>
import TheTable from "../../common/TheTable.vue";
import FormInfo from "./FormInfo.vue";
import QRCode from 'qrcodejs2'

import {
  getInfoBypage,
  addInfo,
  editInfo,
  delInfo,
  detialInfo,
} from "../../../Api/processingplant/process_material";
export default {
  components: {
    TheTable,
    FormInfo,
  },
  props: {
    // 表头数据
    columns: {
      Array,
    },
    judge: {
      Boolean,
    },
    search_data: {
      Object,
    },
    varietyList: {
      Array,
    },
    productType: {
      Array,
    },
    unitList: {
      Array,
    },
    inputList: {
      Array,
    },
    levelList: {
      Array,
    },
    tagStatusList: {
      Array,
    },
  },

  data() {
    return {
      // 表格数据
      allList: [],
      //表单名称
      dialogTitle: "",
      //按钮名称
      message: "",
      //修改进货信息传入对象
      editObject: {},

      //具体信息
      materialInfo: {},
      //是否显示表单
      dialogVisible: false,
      qrCodeDialogVisible:false,
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      showPage: true, // 显示分页
    };
  },
  computed: {
    
  },
  created() {
    this.setAllList();
  },
  watch: {
    judge: function () {
      this.setAllList();
    },
  },
  mounted() {},
  methods: {
      //关闭弹框清除二维码
      qrCodeHandleClose() {
        this.qrCodeDialogVisible = false;
        this.qrCode = '';
        document.getElementById('qrCode').innerHTML = '';
      },
      //创建二维码
      qrcode(url) {
        this.qrCode = new QRCode('qrCode', {
          text: url,
          width: 200,
          height: 200
        })
      },
      qrCodeCreate(){
        let url = '' 
        this.$nextTick(() => {
          this.qrcode(url);
        })
      },
      //二维码显示
      qrCodeOpen(val) {
       this.qrCodeDialogVisible = true;
        },
    //删除选中的原辅料数据
    selectData(list) {
      this.$emit("selectData", list);
    },
    //获取数据
    async setAllList() {
      const { data: res } = await getInfoBypage(
        this.page.current,
        this.page.pageSize
      );
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
        this.$message.error("获取原辅料数据失败");
      } else {
        if (res.data === null) {
          return this.$message.warning("搜索范围内无数据");
        }
        this.allList = res.data.records;
        this.page.total = parseInt(res.data.total);
      }
    },
    //通过时间范围、sku、进厂类型分页查看原料进口登记信息
    async getList() {
      const { data: res } = await getMaterialInfo(
        this.page.current,
        this.page.pageSize,
        this.search_data
      );
      console.log("hhhhh----", res);
    },
    
    //修改原辅料库存信息
    async editMaterInfo(data) {
      console.log(data);
      const { data: res } = await editInfo(data);
      console.log("fff", res);
      if (res.statusCode === 20000) {
        this.setAllList();
        this.$message.success("修改原辅料信息成功");
        this.dialogVisible = false;
      } else {
        if (res.data == null) {
          this.dialogVisible = false;
          this.$message.error("修改失败");
        }
      }
    },
    //打开面板
    editEvent(row) {
      console.log("row", row);
      row.factoryId = parseInt(row.factoryId);
      this.dialogTitle = "修改原辅料库存信息";
      this.editObject = row;
      this.dialogVisible = true;
      this.message = "立即修改";
    },

    //选择入库类型
    changeEvent(index) {
      // console.log(index);
      this.editObject.enterType = this.TypeList[index].enterType;
    },
    //关闭表单
    closeEvent() {
      this.setAllList();
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    //删除信息
    async removeMaterial(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该原辅料信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await delInfo(id);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.setAllList();
      }
    },
    //查看明细
    async lookMaterialInfo() {
      console.log(this.materialInfo);
      const { data: res } = await detailInfo(this.materialInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.setAllList();
        this.dialogVisible = false;
        this.materialInfo = {};
        this.refresh();
      }
    },
    changePage(page) {
      this.page.current = page.current;
      this.setAllList();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      console.log(size);
      this.page.pageSize = size.pageSize;
      this.setAllList();
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand .title span {
  width: 100%;
  height: 40px;
  font-size: 18px;
}
.demo-table-expand label {
  width: 90px;
  color: #d0e0f7;
}
.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}
</style>